<!-- 
  1 快速实现静态布局
  2 使用提供好的数组数据 来遍历 渲染页面
 -->
<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  <title>01-捐赠管理.html</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    h3 {
      margin: 50px;
      text-align: center;
    }

    div {
      width: 914.17px;
      margin: 0px auto;
      border: 1px solid blue;
      display: flex;
      justify-content: space-around;
      padding: 5px 0;
    }

    table {
      width: 800px;
      margin: 0 auto;
      border-collapse: collapse;
      text-align: center;
    }

    thead {
      background-color: #337ab7;
      color: #fff;
    }

    td,
    th {
      padding: 10px 50px;
      /* 设置文字不换行 */
      white-space: nowrap;
    }
  </style>
</head>

<body>
  <h3>捐赠管理</h3>
  <div>
    <!-- 关闭输入框的历史输入 -->
    <form autocomplete="off">
      <label for="">捐赠人</label>
      <input type="text" id="username" />

      <label for="for">受捐单位</label>
      <select id="unit">
        <option value="腾讯">腾讯</option>
        <option value="阿里">阿里</option>
        <option value="百度">百度</option>
        <option value="谷歌">谷歌</option>
      </select>

      <label for="">金额</label>
      <input type="text" id="money" />

      <label for="">日期</label>
      <input type="date" id="date" />

      <button>新增</button>
    </form>
  </div>
  <table border="1">
    <thead>
      <tr>
        <th>序号</th>
        <th>捐赠人</th>
        <th>收捐单位</th>
        <th>金额</th>
        <th>收捐日期</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
        <td>3</td>
        <td>李连杰</td>
        <td>嫣然基金</td>
        <td>1000</td>
        <td>2021-06-7</td>
        <td>
          <a href="#" class="del">删</a>
          <a href="#" class="update">改</a>
        </td>
      </tr> -->
    </tbody>
  </table>
  <script>

    let arr = [
      {
        username: '哈哈哈',
        unit: '腾讯',
        money: 1000,
        date: (new Date()).toLocaleDateString()
      }
    ]
    const username = document.querySelector('#username')
    const unit = document.querySelector('#unit')
    const money = document.querySelector('#money')
    const date = document.querySelector('#date')
    const button = document.querySelector('button')
    button.addEventListener('click', function (e) {
      e.preventDefault()
      const person = {
        username: username.value,
        unit: unit.value,
        money: money.value,
        date: date.value
      }
      arr.push(person)
      render()
    })

    const tbody = document.querySelector('tbody')
    function render() {
      const newArr = arr.map(function (item, index) {
        return `
              <tr>
              <td>${index + 1}</td>
              <td>${item.username}</td>
              <td>${item.unit}</td>
              <td>${item.money}</td>
              <td>${item.date}</td>
              <td>
                <a href="#" class="del" data-id=${index}>删</a>
              </td>
            </tr>
        `
      })
      tbody.innerHTML = newArr.join('')
    }
    render()

    const del = document.querySelector('.del')
    del.addEventListener('click', function (e) {
      console.log(e.target.tagName);
      if (e.target.tagName == 'A') {
        arr.splice(e.target.dataset.id, 1)
        render()
      }
    })
  </script>
</body>

</html>